<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :model="searchForm" label-width="120">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="企业名称">
            <el-input v-model="searchForm.productName" placeholder="请输入企业名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="人员姓名">
            <el-input v-model="searchForm.name" placeholder="请输入企业名称"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="行政区划市">
            <el-select v-model="searchForm.categoryId">
              <el-option
                v-for="item in serviceTypeList"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="区县/管辖机构">
            <el-select v-model="searchForm.categoryId">
              <el-option
                v-for="item in serviceTypeList"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item>
            <el-button @click="handleRestSearch()">重置</el-button>
            <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div>
        <el-button type="primary" @click="handleCreate()">新增企业人员信息</el-button>
      </div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column label="所属企业名称">
        <template #default="{ row }">
          <div>{{ row.repair && row.repair.name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="企业人员姓名" />
      <el-table-column prop="contactPhone" label="人员联系方式" />
      <el-table-column prop="position" label="职务(岗位)">
        <template #default="{ row }">
          <div>{{ handleFilterPosition(row.position) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="rank" label="技术职称" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-popconfirm title="你确定要删除该人员?" width="180" @confirm="handleDelete(row)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <!-- 新增编辑弹框 -->
    <form-drawer ref="formDrawerRef" @submit="handleSubmit">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="民族" prop="nation">
          <el-select v-model="form.nation" placeholder="请选择民族" filterable>
            <el-option
              v-for="item in nationList"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件类型" prop="certificateType">
          <el-select v-model="form.certificateType" placeholder="请选择证件类型">
            <el-option label="居民身份证" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码" prop="certificateNo">
          <el-input v-model="form.certificateNo" placeholder="请输入证件号码"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="contactPhone">
          <el-input v-model="form.contactPhone" placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item label="联系地址" prop="contactAddress">
          <el-input v-model="form.contactAddress" placeholder="请输入联系地址"></el-input>
        </el-form-item>
        <el-form-item label="职务(岗位)" prop="position">
          <el-select v-model="form.position" placeholder="请选择职务(岗位)" filterable>
            <el-option
              v-for="item in postList"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文化程度" prop="education">
          <el-input v-model="form.education" placeholder="请输入文化程度"></el-input>
        </el-form-item>
        <el-form-item label="从业资格等级" prop="certificationLevel">
          <el-select v-model="form.certificationLevel" placeholder="请输入从业资格等级">
            <el-option label="初级从业资格" :value="1"></el-option>
            <el-option label="中级从业资格" :value="2"></el-option>
            <el-option label="高级从业资格" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="技术职称" prop="rank">
          <el-input v-model="form.rank" placeholder="请输入技术职称"></el-input>
        </el-form-item>
        <el-form-item label="发证部门" prop="issuingDepartment">
          <el-input v-model="form.issuingDepartment" placeholder="请输入发证部门"></el-input>
        </el-form-item>
      </el-form>
    </form-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { useInitTable, useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
import { postList, nationList } from "@/enum/index";
import {
  getEnterprisePersonPageApi,
  addEnterisePersonApi,
  editEnterisePersonApi,
  deleteEnterisePersonApi
} from "@/api/maintain";

const {
  tableData,
  searchForm,
  currentPage,
  limit,
  total,
  handleRestSearch,
  handleGetTableList,
  handleDelete
} = useInitTable({
  searchForm: {},
  getTableList: getEnterprisePersonPageApi,
  deleteData: deleteEnterisePersonApi
});

const { formDrawerRef, formRef, form, rules, handleCreate, handleEdit, handleSubmit } = useInitForm(
  {
    form: {
      id: "",
      name: "",
      gender: "",
      nation: "",
      certificateType: "",
      certificateNo: "",
      contactPhone: "",
      contactAddress: "",
      position: "",
      education: "",
      certificationLevel: "",
      rank: "",
      issuingDepartment: ""
    },
    rules: {
      name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
      gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
      certificateType: [{ required: true, message: "请选择证件类型", trigger: "blur" }],
      certificateNo: [{ required: true, message: "请输入证件号码", trigger: "blur" }],
      contactPhone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
      contactAddress: [{ required: true, message: "请输入联系地址", trigger: "blur" }],
      position: [{ required: true, message: "请选择职务(岗位)", trigger: "blur" }]
    },
    createData: addEnterisePersonApi,
    updateData: editEnterisePersonApi,
    success: () => {
      handleGetTableList();
    }
  }
);

const handleFilterPosition = (val: string) => {
  const newItem = postList.find((item: any) => item.value == val);
  return newItem ? newItem.label : "";
};
</script>
<style scoped lang="scss"></style>
